<div class="header" fxLayout="row" fxLayoutAlign=" center">
  <mat-toolbar>
    <span>List of Intents</span>
    <span class="example-spacer"></span>
    <button mat-fab color="primary" (click)="trainModels()">TRAIN</button>
    <button class="margin-left" mat-fab (click)="add()">
      <mat-icon aria-label="Example icon-button with a heart icon">add</mat-icon>
    </button>
  </mat-toolbar>
</div>



<mat-card>
  <div *ngFor="let intent of intents" fxLayout="row" fxLayoutAlign=" center" class="intent-container">
    <div>
      <strong>{{intent.name}}</strong>
    </div>
    <span class="example-spacer"></span>
    <div>
      <button mat-icon-button (click)="train(intent)" color="primary" matTooltip="Add examples">
      <mat-icon>add</mat-icon></button>
      <button mat-icon-button (click)="edit(intent)" color="secondary" matTooltip="Edit this intent">
        <mat-icon >edit</mat-icon>
      </button>
      <button mat-icon-button (click)="delete(intent)" color="warn" *ngIf="intent.userDefined" matTooltip="Delete this intent">
        <mat-icon >delete</mat-icon>
      </button>
    </div>
  </div>
  <br>

</mat-card>